<template>
	<div class="deit">
		<div class="node" v-has="{action: 'personal:agreement:view', effect: 'move'}">
		<div class="crumbs">
			<div class="cantainer">
				<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
				<el-button v-has="{action: 'personal:agreement:update', effect: 'move'}" class="editor-btn" type="primary" @click="submit">提交</el-button>
			</div>
		</div>
		</div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'personal:agreement:view', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
	</div>
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import request from "@/tools/request";
	export default {
		name: 'agreementInfo',
		data() {
			return {
				content: '',
				editorOption: {
					placeholder: '请编辑相关内容'
				}
			}
		},
        created(){
            this.fetchData()
        },
		components: {
			quillEditor
		},
		methods: {
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = text;
			},
			async submit() {
				console.log(this.content)
				return
				if (this.content === '') {
					this.$message.warning('内容不能为空！');
				} else {
                     let res = await request({
                            url: "/personal/agreement/update",
                            method: "POST",
                            data: {html: this.content}
                        });
						if(res.code !==0) return
                         this.$message.success(res.msg)
					/* this.$axios.post("/apis/edit.json", this.content).then(res => {
					}) */
				}
			},
            async fetchData(){
                let res = await request({
                    url: '/personal/agreement/view',
                    method: "GET",
                    data: {}
                });
                let data = res.html
                this.content = data
               
            },
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.cantainer {
		padding: 30px;
		background: #ffffff;
		border-radius: 5px;
		margin-top: 20px;
	}

	.quill-editor {
		height: 500px;
	}

	.editor-btn {
		margin-top: 100px;
		width: 200px;
	}
</style>
